<template>
	<u-popup :show="show" @close="close" @open="open" round="100" :closeOnClickOverlay="false">
		<view class="content">
			<view class="content-title">
				{{isTeacher == 0 ? '选择孩子' : '选择班级'}}
			</view>
			<view class="">
				<view class="flex-row mt-30 align-center justify-between item" v-for="(item,index) in list">
					<view class="" @click="select(index)">
						<u-icon name="checkmark-circle-fill" color="#6CB500" v-if="item.checked"></u-icon>
						<u-icon name="checkmark-circle" v-else></u-icon>
					</view>
					<view class="flex-row">
						<view>{{item.name}}</view>
						<!-- <view>{{item.name}}</view> -->
					</view>
				</view>
			</view>
		</view>
	</u-popup>
</template>
<script>
	import {
		banjiList,
		userStudent
	} from '@/common/api.js'
	import commonMixin from '@/mixins/common.js';
	export default {
		mixins: [commonMixin],
		data() {
			return {
				show: false,
				list: []
			}
		},
		mounted() {
			// this.$emit('')
			if(this.isLogin) this.init()
		},
		onLoad() {

		},
		methods: {
			init() {
				let vm = this;
				if (this.isTeacher == 1) {
					console.log('this.$banjiInfo',this.$banjiInfo == null);
					if (this.$banjiInfo == null) {
						this.initData()
					}

				} else if (!this.$studentInfo) {
					this.initData()
				}
			},
			initData() {
				if (this.isTeacher == 1) {
					banjiList().then(res => {
						this.show = true
						this.list = res.map(v => {
							v.checked = false
							return v
						})
					})
				}else {
					userStudent().then(res => {
						this.show = true
						this.list = res.map(v => {
							v.checked = false
							return v
						})
					})
				}
			},
			select(index) {
				uni.showLoading({
					title:'更新中...'
				})
				this.list = this.list.map(v => {
					v.checked = false
					return v
				})
				this.list[index].checked = true;
				let info = this.list[index]
				if (this.isTeacher == 1) {
					this.$store.commit("setBanjiInfo", info);
				} else {
					console.log('info',info);
					this.$store.commit("setStudentInfo", info);
					this.$store.commit("setBanjiInfo", info.banji);
				}
				this.close();
				uni.hideLoading()
			},
			open() {
				this.initData()
			},
			close() {
				this.show = false
			},
		}
	}
</script>

<style>
	.content {
		background: linear-gradient(to bottom, #F5FFE6 10rpx, #ffffff 100rpx);
		padding: 30rpx;
		border-top-right-radius: 30rpx;
		border-top-left-radius: 30rpx;
	}

	.content-title {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		font-weight: 700;
		font-size: 32rpx;
		position: relative;
		z-index: 1;
	}

	.content-title::after {
		content: " ";
		position: absolute;
		top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 130rpx;
		height: 10rpx;
		border-radius: 6rpx;
		background: linear-gradient(to right, #FFFFFF, #6CB500);
		z-index: -1;
	}

	.item {
		padding-bottom: 30rpx;
		border-bottom: 1rpx solid #E6E6E6;
	}

	.item:last-child {
		border: none;
	}
</style>